<!DOCTYPE html>
<head>
    <title>Create</title>
    <link href="/static/encode.css" rel="stylesheet" type="text/css">
</head>
<body>
    <img id=logo src="/static/deaddroplogo.jpg" />
    <h1>Create</h1>
    <div id=navbar>
        <ol>
            <li><a href="home.html">Home</a></li>
            <li><a href="instructions.html">Instructions</a></li>
            <li><a href="encode.html">Encode</a></li>
            <li><a href="decode.html">Decode</a></li>
            <li><a href="create.html">Create</a></li>
        </ol>
    </div>
    <p>Enter the character that you would like to represent each letter and number.</p>
    <div>
    <form action='create' method='post'>
        <table id=alphaTable>
            <tr>
                <td>a = <input type=text name='a' value=a maxlength=1></td>
                <td>b = <input type=text name='b' value=b maxlength=1></td>
                <td>c = <input type=text name='c' value=c maxlength=1></td>
                <td>d = <input type=text name='d' value=d maxlength=1></td>
                <td>e = <input type=text name='e' value=e maxlength=1></td>
                <td>f = <input type=text name='f' value=f maxlength=1></td>
                <td>g = <input type=text name='g' value=g maxlength=1></td>
            </tr><tr> 
                <td>h = <input type=text name='h' value=h maxlength=1></td>
                <td>i = <input type=text name='i' value=i maxlength=1></td>
                <td>j = <input type=text name='j' value=j maxlength=1></td>
                <td>k = <input type=text name='k' value=k maxlength=1></td>
                <td>l = <input type=text name='l' value=l maxlength=1></td>
                <td>m = <input type=text name='m' value=m maxlength=1></td>
                <td>n = <input type=text name='n' value=n maxlength=1></td>
            </tr><tr> 
                <td>o = <input type=text name='o' value=o maxlength=1></td>
                <td>p = <input type=text name='p' value=p maxlength=1></td>
                <td>q = <input type=text name='q' value=q maxlength=1></td>         
                <td>r = <input type=text name='r' value=r maxlength=1></td>
                <td>s = <input type=text name='s' value=s maxlength=1></td>
                <td>t = <input type=text name='t' value=t maxlength=1></td>
                <td>u = <input type=text name='u' value=u maxlength=1></td>
            </tr><tr>
                <td>v = <input type=text name='v' value=v maxlength=1></td>
                <td>w = <input type=text name='w' value=w  maxlength=1></td>
                <td>x = <input type=text name='x' value=x  maxlength=1></td>
                <td>y = <input type=text name='y' value=y maxlength=1></td>
                <td>z = <input type=text name='z' value=z  maxlength=1></td>
            </tr>
        </table>
        <table id=numTable>
            <tr>
                <td>0 = <input type=text name='0' value=0 maxlength=1></td>
                <td>1 = <input type=text name='1' value=1  maxlength=1></td>
                <td>2 = <input type=text name='2' value=2  maxlength=1></td>
                <td>3 = <input type=text name='3' value=3  maxlength=1></td>
                <td>4 = <input type=text name='4' value=4  maxlength=1></td>
            </tr><tr>
                <td>5 = <input type=text name='5' value=5  maxlength=1></td>
                <td>6 = <input type=text name='6' value=6  maxlength=1></td>
                <td>7 = <input type=text name='7' value=7  maxlength=1></td>
                <td>8 = <input type=text name='8' value=8  maxlength=1></td>
                <td>9 = <input type=text name='9' value=9  maxlength=1></td>
            </tr>
        </table>
        <button id=createButton>CREATE</button>
    <form>
    </div>
    <label id=keyLabel>Key</label>
    <textarea rows="1" cols="50">{{key}}</textarea>
    <textarea rows="1" cols="50">{{keyString}}</textarea>
</body>
